<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :hide-on-single-page="hideSinglePage"
    :current-page="this.pagination.page"
    :page-sizes="[10, 30, 50, 100]"
    :page-size="this.pagination.size"
    :layout="layout"
    :total="this.pagination.total">
  </el-pagination>
</template>

<script>
  export default {
    name: 'Pagination',
    props: {
      pagination: null,
      layout: "total, sizes, prev, pager, next, jumper"
    },
    watch: {
      page(val) {
        this.pagination = val;
      }
    },
    data() {
      return {
        hideSinglePage: true,
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pagination.size = val
        this.$emit('refresh')
      },
      handleCurrentChange(val) {
        this.pagination.page = val
        this.$emit('refresh')
      },
    }
  }

</script>

<style scoped>

</style>
